
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <script>
        // Part1 方法中函数嵌套 this缺陷
        var num = {
            x:5,
            calculate:function (y) {
                //内部嵌套函数
                function add() {
                    console.log(this.x+y);//this绑定到了哪里？window
                }
                //内部嵌套函数
                function sub() {
                    console.log(this.x-y);//this绑定到了哪里？window
                }
                add();
                sub();
            }
        };
        num.calculate(2);


        // Part2 方法中函数嵌套 this缺陷 解决办法
        // 解决方案一：软绑定
        var num = {
            x:5,
            calculate:function (y) {
                var that = this; //that是个变量 this没有作用域传递但是that有作用域传递
                //内部嵌套函数
                function add() {
                    console.log(that.x+y);//this绑定到了哪里？
                }
                //内部嵌套函数
                function sub() {
                    console.log(that.x-y);//this绑定到了哪里？
                }
                add();
                sub();
            }
        };
        num.calculate(2);

        //解决方案二：通过call和apply来解决
        var num = {
            x:5,
            calculate:function (y) {
                //内部嵌套函数
                function add() {
                    console.log(this.x+y);//this绑定到了哪里？
                }
                //内部嵌套函数
                function sub() {
                    console.log(this.x-y);//this绑定到了哪里？
                }
                add.call(this);
                sub.call(this);
            }
        };
        num.calculate(2);

        //解决方案三：通过bind来解决
        var num = {
            x:5,
            calculate:function (y) {
                //内部嵌套函数
                function add() {
                    console.log(this.x+y);//this绑定到了哪里？
                }
                //内部嵌套函数
                function sub() {
                    console.log(this.x-y);//this绑定到了哪里？
                }
                add.bind(this)();
                sub.bind(this)();
            }
        };
        num.calculate(2);
        </script>
    </body>
</html>
